<template>
  <div
    id="subscribe"
    class="main-div"
    v-loading="subscribeLoading"
  >
    <div class="my-breadcrumb-div">
      <i class="el-icon-location my-breadcrumb-icon my-breadcrumb-padding" />
      <el-breadcrumb
        class="my-breadcrumb-padding"
        separator="/"
      >
        <el-breadcrumb-item>
          <!--配置-->
          {{ $t('message.reservation.breadcrumb.crumb1') }}
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <!--预约点对点通信-->
          {{ $t('message.reservation.breadcrumb.crumb2') }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <el-card style="height: calc(100% - 60px)">
      <div
        class="card-header-div"
        style="float: none"
      >
        <!--预约点对点通信-->
        {{ $t('message.reservation.card.title') }}
        <el-button
          @click="handleSubscribeCreate"
          style="padding: 0 0 0 5px"
          type="text"
        >
          <i
            class="el-icon-plus"
            style="font-weight: bold"
          />
        </el-button>
      </div>
      <el-table
        style="margin-top: 10px"
        height="calc(100% - 3em)"
        :data="subscribeTable"
        header-cell-class-name="my-table-header-cell"
        cell-class-name="my-table-cell"
      >
        <!--更多-->
        <el-table-column
          :label="$t('message.reservation.card.table.header.expand')"
          type="expand"
          width="100px"
        >
          <template slot-scope="props">
            <div style="width: 100%">
              <div style="display: inline-block;width: 50%">
                <el-form
                  inline
                  label-width="120px"
                >
                  <el-form-item class="subscribe-expand-form-item">
                    <span
                      class="subscribe-expand-form-label"
                      slot="label"
                    >
                      <!--终端1-->
                      {{ $t('message.reservation.card.table.expand.label1') }}1
                    </span>
                    <span>{{ props.row.caller_device }}</span>
                  </el-form-item>
                  <el-form-item class="subscribe-expand-form-item">
                    <span
                      class="subscribe-expand-form-label"
                      slot="label"
                    >
                      <!--速率-->
                      {{ $t('message.reservation.card.table.expand.label6') }}
                    </span>
                    <span>{{ props.row.caller_speed }}</span>
                  </el-form-item>
                  <el-form-item class="subscribe-expand-form-item">
                    <span
                      class="subscribe-expand-form-label"
                      slot="label"
                    >
                      <!--上行起始频点-->
                      {{ $t('message.reservation.card.table.expand.label2') }}
                    </span>
                    <span>{{ props.row.caller_up_freq_begin }}</span>
                  </el-form-item>
                  <el-form-item class="subscribe-expand-form-item">
                    <span
                      class="subscribe-expand-form-label"
                      slot="label"
                    >
                      <!--功率-->
                      {{ $t('message.reservation.card.table.expand.label7') }}
                    </span>
                    <span>{{ props.row.caller_power }}</span>
                  </el-form-item>
                  <el-form-item class="subscribe-expand-form-item">
                    <span
                      class="subscribe-expand-form-label"
                      slot="label"
                    >
                      <!--上行终止频点-->
                      {{ $t('message.reservation.card.table.expand.label3') }}
                    </span>
                    <span>{{ props.row.caller_up_freq_end }}</span>
                  </el-form-item>
                  <el-form-item class="subscribe-expand-form-item">
                    <span
                      class="subscribe-expand-form-label"
                      slot="label"
                    >
                      <!--卫星-->
                      {{ $t('message.reservation.card.table.expand.label8') }}
                    </span>
                    <span>{{ props.row.satellite_name }}</span>
                  </el-form-item>
                  <el-form-item class="subscribe-expand-form-item">
                    <span
                      class="subscribe-expand-form-label"
                      slot="label"
                    >
                      <!--下行起始频点-->
                      {{ $t('message.reservation.card.table.expand.label4') }}
                    </span>
                    <span>{{ props.row.caller_down_freq_begin }}</span>
                  </el-form-item>
                  <el-form-item class="subscribe-expand-form-item">
                    <span
                      class="subscribe-expand-form-label"
                      slot="label"
                    >
                      <!--波束-->
                      {{ $t('message.reservation.card.table.expand.label9') }}
                    </span>
                    <span>{{ props.row.caller_beam_name }}</span>
                  </el-form-item>
                  <el-form-item class="subscribe-expand-form-item">
                    <span
                      class="subscribe-expand-form-label"
                      slot="label"
                    >
                      <!--下行终止频点-->
                      {{ $t('message.reservation.card.table.expand.label5') }}
                    </span>
                    <span>{{ props.row.caller_down_freq_end }}</span>
                  </el-form-item>
                  <el-form-item class="subscribe-expand-form-item">
                    <span
                      class="subscribe-expand-form-label"
                      slot="label"
                    >
                      <!--转发器-->
                      {{ $t('message.reservation.card.table.expand.label10') }}
                    </span>
                    <span>{{ props.row.called_transponder_name }}</span>
                  </el-form-item>
                </el-form>
              </div>
              <div style="display: inline-block;width: 50%">
                <el-form
                  inline
                  label-width="120px"
                >
                  <el-form-item class="subscribe-expand-form-item">
                    <span
                      class="subscribe-expand-form-label"
                      slot="label"
                    >
                      <!--终端1-->
                      {{ $t('message.reservation.card.table.expand.label1') }}2
                    </span>
                    <span>{{ props.row.called_device }}</span>
                  </el-form-item>
                  <el-form-item class="subscribe-expand-form-item">
                    <span
                      class="subscribe-expand-form-label"
                      slot="label"
                    >
                      <!--速率-->
                      {{ $t('message.reservation.card.table.expand.label6') }}
                    </span>
                    <span>{{ props.row.called_speed }}</span>
                  </el-form-item>
                  <el-form-item class="subscribe-expand-form-item">
                    <span
                      class="subscribe-expand-form-label"
                      slot="label"
                    >
                      <!--上行起始频点-->
                      {{ $t('message.reservation.card.table.expand.label2') }}
                    </span>
                    <span>{{ props.row.called_up_freq_begin }}</span>
                  </el-form-item>
                  <el-form-item class="subscribe-expand-form-item">
                    <span
                      class="subscribe-expand-form-label"
                      slot="label"
                    >
                      <!--功率-->
                      {{ $t('message.reservation.card.table.expand.label7') }}
                    </span>
                    <span>{{ props.row.called_power }}</span>
                  </el-form-item>
                  <el-form-item class="subscribe-expand-form-item">
                    <span
                      class="subscribe-expand-form-label"
                      slot="label"
                    >
                      <!--上行终止频点-->
                      {{ $t('message.reservation.card.table.expand.label3') }}
                    </span>
                    <span>{{ props.row.called_up_freq_end }}</span>
                  </el-form-item>
                  <el-form-item class="subscribe-expand-form-item">
                    <span
                      class="subscribe-expand-form-label"
                      slot="label"
                    >
                      <!--卫星-->
                      {{ $t('message.reservation.card.table.expand.label8') }}
                    </span>
                    <span>{{ props.row.satellite_name }}</span>
                  </el-form-item>
                  <el-form-item class="subscribe-expand-form-item">
                    <span
                      class="subscribe-expand-form-label"
                      slot="label"
                    >
                      <!--下行起始频点-->
                      {{ $t('message.reservation.card.table.expand.label4') }}
                    </span>
                    <span>{{ props.row.called_down_freq_begin }}</span>
                  </el-form-item>
                  <el-form-item class="subscribe-expand-form-item">
                    <span
                      class="subscribe-expand-form-label"
                      slot="label"
                    >
                      <!--波束-->
                      {{ $t('message.reservation.card.table.expand.label9') }}
                    </span>
                    <span>{{ props.row.called_beam_name }}</span>
                  </el-form-item>
                  <el-form-item class="subscribe-expand-form-item">
                    <span
                      class="subscribe-expand-form-label"
                      slot="label"
                    >
                      <!--下行终止频点-->
                      {{ $t('message.reservation.card.table.expand.label5') }}
                    </span>
                    <span>{{ props.row.called_down_freq_end }}</span>
                  </el-form-item>
                  <el-form-item class="subscribe-expand-form-item">
                    <span
                      class="subscribe-expand-form-label"
                      slot="label"
                    >
                      <!--转发器-->
                      {{ $t('message.reservation.card.table.expand.label10') }}
                    </span>
                    <span>{{ props.row.called_transponder_name }}</span>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </template>
        </el-table-column>
        <!--终端1-->
        <el-table-column
          :label="$t('message.reservation.card.table.header.col1')"
          prop="caller_device"
        />
        <!--终端2-->
        <el-table-column
          :label="$t('message.reservation.card.table.header.col2')"
          prop="called_device"
        />
        <!--开始时间-->
        <el-table-column
          :label="$t('message.reservation.card.table.header.col3')"
          prop="start_time_show"
        />
        <!--结束时间-->
        <el-table-column
          :label="$t('message.reservation.card.table.header.col4')"
          prop="end_time_show"
        />
        <!--操作-->
        <el-table-column :label="$t('message.reservation.card.table.header.col5')">
          <template slot-scope="scope">
            <el-button
              style="padding: 0 0 0 5px"
              @click.stop="handleSubscribeDelete(scope.row)"
              type="text"
            >
              <img src="@/assets/common/delete.png">
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <div>
      <!--添加预约点对点通信-->
      <el-dialog
        :title="$t('message.reservation.dialog.reservation.create.title')"
        @close="handleAddSubscribeDialogClose"
        top="8vh"
        width="950px"
        :close-on-click-modal="false"
        :visible.sync="addSubscribeVisible"
        v-loading="subscribeDialogLoading"
      >
        <el-steps
          :active="addSubscribeStep"
          align-center
        >
          <!--步骤1-->
          <el-step :title="$t('message.reservation.dialog.reservation.create.steps.step1')" />
          <!--步骤2-->
          <el-step :title="$t('message.reservation.dialog.reservation.create.steps.step2')" />
          <!--步骤3-->
          <el-step :title="$t('message.reservation.dialog.reservation.create.steps.step3')" />
        </el-steps>
        <div class="subscribe-dialog-div-content">
          <div
            class="subscribe-dialog-div-content-item1 background-color-base"
            style="margin-right: 20px;box-sizing: border-box"
          >
            <div class="subscribe-dialog-form-header-container">
              <div class="subscribe-dialog-form-header">
                <span>
                  <!--当前信息:-->
                  {{ $t('message.reservation.dialog.reservation.create.leftForm.header') }}
                </span>
              </div>
            </div>
            <el-form
              style="height: 400px"
              class="demo-ruleform"
              :model="addSubscribeForm"
              label-width="120px"
            >
              <!--终端1-->
              <el-form-item
                class="no-margin-bottom"
                :label="$t('message.reservation.dialog.reservation.create.leftForm.label1')"
                prop="caller_cu_device"
              >
                <span>{{ addSubscribeForm.caller.caller_cu_device }}</span>
              </el-form-item>
              <!--波束-->
              <el-form-item
                class="no-margin-bottom"
                v-if="addSubscribeStep > 1"
                :label="$t('message.reservation.dialog.reservation.create.leftForm.label2')"
                prop="caller.caller_beam.name"
              >
                <span>{{ addSubscribeForm.caller.caller_beam.name }}</span>
              </el-form-item>
              <!--速率-->
              <el-form-item
                class="no-margin-bottom"
                v-if="addSubscribeStep > 1"
                :label="$t('message.reservation.dialog.reservation.create.leftForm.label3')"
                prop="caller.caller_speed.label"
              >
                <span>{{ addSubscribeForm.caller.caller_speed.label }}</span>
              </el-form-item>
              <!--终端2-->
              <el-form-item
                class="no-margin-bottom"
                :label="$t('message.reservation.dialog.reservation.create.leftForm.label4')"
                prop="called_cu_device"
              >
                <span>{{ addSubscribeForm.called.called_cu_device }}</span>
              </el-form-item>
              <!--波束-->
              <el-form-item
                class="no-margin-bottom"
                v-if="addSubscribeStep > 1"
                :label="$t('message.reservation.dialog.reservation.create.leftForm.label5')"
                prop="called.called_beam.name"
              >
                <span>{{ addSubscribeForm.called.called_beam.name }}</span>
              </el-form-item>
              <!--速率-->
              <el-form-item
                class="no-margin-bottom"
                v-if="addSubscribeStep > 1"
                :label="$t('message.reservation.dialog.reservation.create.leftForm.label6')"
                prop="called.called_beam.name"
              >
                <span>{{ addSubscribeForm.called.called_beam.name }}</span>
              </el-form-item>
              <!--卫星-->
              <el-form-item
                class="no-margin-bottom"
                v-if="addSubscribeStep > 1"
                :label="$t('message.reservation.dialog.reservation.create.leftForm.label7')"
                prop="satellite"
              >
                <span>{{ addSubscribeForm.satellite.name }}</span>
              </el-form-item>
              <!--开始时间-->
              <el-form-item
                class="no-margin-bottom"
                :label="$t('message.reservation.dialog.reservation.create.leftForm.label8')"
                prop="start_time"
              >
                <el-date-picker
                  v-if="addSubscribeStep === 0"
                  size="mini"
                  style="width: 180px"
                  type="datetime"
                  v-model="addSubscribeForm.start_time_picker"
                />
                <span v-if="addSubscribeStep > 0">
                  {{ addSubscribeForm.start_time_show }}
                </span>
              </el-form-item>
              <!--结束时间-->
              <el-form-item
                class="no-margin-bottom"
                :label="$t('message.reservation.dialog.reservation.create.leftForm.label9')"
                prop="end_time"
              >
                <el-date-picker
                  v-if="addSubscribeStep === 0"
                  size="mini"
                  style="width: 180px"
                  type="datetime"
                  v-model="addSubscribeForm.end_time_picker"
                />
                <span v-if="addSubscribeStep > 0">
                  {{ addSubscribeForm.end_time_show }}
                </span>
              </el-form-item>
            </el-form>
          </div>
          <div class="subscribe-dialog-div-content-item2">
            <!--第一步-->
            <div
              v-if="addSubscribeStep === 0"
              style="padding-top: 20px"
            >
              <el-tree
                default-expand-all
                show-checkbox
                check-strictly
                node-key="node_key"
                ref="selectDeptTree"
                @check-change="handleDeptTreeCheckChange"
                style="border-radius: 6px;height: 400px;overflow: auto"
                :data="deptTreeForSelectCu"
                :props="deptTreeProps"
              >
                <span
                  style="flex: 1"
                  class="custom-tree-node"
                  slot-scope="{ node, data }"
                >
                  <span v-if="data.node_type === 'root'">
                    <img
                      class="tree-node-img"
                      src="@/assets/config/remote/qw.png"
                    >
                    {{ data.name }}
                  </span>
                  <span v-else-if="data.node_type === 'dept'">
                    <img
                      class="tree-node-img"
                      src="@/assets/config/remote/dq.png"
                    >
                    {{ data.name }}
                  </span>
                  <span v-else-if="data.node_type === 'station'">
                    <img
                      v-if="data.kind === 0"
                      class="tree-node-img"
                      src="@/assets/config/remote/tx.png"
                    >
                    <img
                      v-else-if="data.kind === 1"
                      class="tree-node-img"
                      src="@/assets/config/remote/bx.png"
                    >
                    <img
                      v-else-if="data.kind === 2"
                      class="tree-node-img"
                      src="@/assets/config/remote/che.png"
                    >
                    <img
                      v-else-if="data.kind === 3"
                      class="tree-node-img"
                      src="@/assets/config/remote/cz.png"
                    >
                    <img
                      v-else-if="data.kind === 4"
                      class="tree-node-img"
                      src="@/assets/config/remote/fj.png"
                    >
                    {{ data.name }}
                  </span>
                  <span v-else>
                    <img
                      class="tree-node-img"
                      src="@/assets/config/remote/cu.png"
                    >
                    {{ data.name }}
                  </span>
                </span>
              </el-tree>
            </div>
            <!--第二步-->
            <div
              v-if="addSubscribeStep === 1"
              style="padding-top: 50px;text-align: left"
            >
              <el-form
                ref="addSubscribeStep1Form"
                :model="addSubscribeForm"
                :rules="addSubscribeStep1FormRules"
                label-width="140px"
                size="mini"
              >
                <!--卫星-->
                <el-form-item
                  :label="$t('message.reservation.dialog.reservation.create.right.form1.label1')"
                  prop="satellite"
                >
                  <el-select
                    @change="handleAddSubscribeSatelliteChange"
                    v-model="addSubscribeForm.satellite"
                    value-key="id"
                  >
                    <el-option
                      v-for="item in addSubscribeForm.satelliteOption"
                      :key="item.id"
                      :label="item.name"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
                <!--终端1波束-->
                <el-form-item
                  :label="$t('message.reservation.dialog.reservation.create.right.form1.label2')"
                  prop="caller.caller_beam"
                >
                  <el-select
                    v-model="addSubscribeForm.caller.caller_beam"
                    value-key="id"
                  >
                    <el-option
                      v-for="item in addSubscribeForm.beamOption"
                      :key="item.id"
                      :label="item.name"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
                <!--终端1速率-->
                <el-form-item
                  :label="$t('message.reservation.dialog.reservation.create.right.form1.label3')"
                  prop="caller.caller_speed"
                >
                  <el-select
                    v-model="addSubscribeForm.caller.caller_speed"
                    value-key="key"
                  >
                    <el-option
                      v-for="item in addSubscribeForm.speedOption"
                      :key="item.key"
                      :label="item.label"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
                <!--终端2波束-->
                <el-form-item
                  :label="$t('message.reservation.dialog.reservation.create.right.form1.label4')"
                  prop="called.called_beam"
                >
                  <el-select
                    v-model="addSubscribeForm.called.called_beam"
                    value-key="id"
                  >
                    <el-option
                      v-for="item in addSubscribeForm.beamOption"
                      :key="item.id"
                      :label="item.name"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
                <!--终端2速率-->
                <el-form-item
                  :label="$t('message.reservation.dialog.reservation.create.right.form1.label5')"
                  prop="called.called_speed"
                >
                  <el-select
                    v-model="addSubscribeForm.called.called_speed"
                    value-key="key"
                  >
                    <el-option
                      v-for="item in addSubscribeForm.speedOption"
                      :key="item.key"
                      :label="item.label"
                      :value="item"
                    />
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
            <!--第三步-->
            <div v-if="addSubscribeStep === 2">
              <el-form
                :model="addSubscribeForm"
                ref="addSubscribeStep2Form"
                :rules="addSubscribeStep2FormRules"
                label-width="130px"
                size="small"
              >
                <el-row>
                  <el-col :span="12">
                    <!--终端1-->
                    <el-form-item :label="$t('message.reservation.dialog.reservation.create.right.form2.label1') + '1'" />
                    <!--转发器-->
                    <el-form-item
                      :label="$t('message.reservation.dialog.reservation.create.right.form2.label2')"
                      prop="caller.caller_transponder"
                    >
                      <el-select
                        @change="handleCallerTransponderSelectChange"
                        v-model="addSubscribeForm.caller.caller_transponder"
                        value-key="id"
                      >
                        <el-option
                          v-for="item in addSubscribeForm.caller.caller_transponderOption"
                          :key="item.id"
                          :label="item.name"
                          :value="item"
                        />
                      </el-select>
                    </el-form-item>
                    <!--频率段-->
                    <el-form-item
                      :label="$t('message.reservation.dialog.reservation.create.right.form2.label3')"
                      prop="caller.caller_freq_segment"
                    >
                      <el-select
                        v-model="addSubscribeForm.caller.caller_freq_segment"
                        value-key="id"
                      >
                        <el-option
                          v-for="item in addSubscribeForm.caller.caller_freq_segmentOption"
                          :key="item.id"
                          :label="item.name"
                          :value="item"
                        />
                      </el-select>
                    </el-form-item>
                    <!--上行起始频点-->
                    <el-form-item
                      :label="$t('message.reservation.dialog.reservation.create.right.form2.label4')"
                      prop="caller.caller_up_freq_begin"
                    >
                      <el-input
                        class="mini-append"
                        v-model="addSubscribeForm.caller.caller_up_freq_begin"
                      >
                        <template slot="append">
                          Hz
                        </template>
                      </el-input>
                    </el-form-item>
                    <!--上行终止频点-->
                    <el-form-item
                      :label="$t('message.reservation.dialog.reservation.create.right.form2.label5')"
                      prop="caller.caller_up_freq_end"
                    >
                      <el-input
                        class="mini-append"
                        v-model="addSubscribeForm.caller.caller_up_freq_end"
                      >
                        <template slot="append">
                          Hz
                        </template>
                      </el-input>
                    </el-form-item>
                    <!--下行起始频点-->
                    <el-form-item
                      :label="$t('message.reservation.dialog.reservation.create.right.form2.label6')"
                      prop="caller.caller_down_freq_begin"
                    >
                      <el-input
                        class="mini-append"
                        v-model="addSubscribeForm.caller.caller_down_freq_begin"
                      >
                        <template slot="append">
                          Hz
                        </template>
                      </el-input>
                    </el-form-item>
                    <!--下行终止频点-->
                    <el-form-item
                      :label="$t('message.reservation.dialog.reservation.create.right.form2.label7')"
                      prop="caller.caller_down_freq_end"
                    >
                      <el-input
                        class="mini-append"
                        v-model="addSubscribeForm.caller.caller_down_freq_end"
                      >
                        <template slot="append">
                          Hz
                        </template>
                      </el-input>
                    </el-form-item>
                    <!--功率-->
                    <el-form-item
                      :label="$t('message.reservation.dialog.reservation.create.right.form2.label8')"
                      prop="caller.caller_power"
                    >
                      <el-input
                        class="mini-append"
                        v-model="addSubscribeForm.caller.caller_power"
                      >
                        <template slot="append">
                          dB
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <!--终端2-->
                    <el-form-item :label="$t('message.reservation.dialog.reservation.create.right.form2.label1') + '2'" />
                    <!--转发器-->
                    <el-form-item
                      :label="$t('message.reservation.dialog.reservation.create.right.form2.label2')"
                      prop="called.called_transponder"
                    >
                      <el-select
                        @change="handleCalledTransponderSelectChange"
                        v-model="addSubscribeForm.called.called_transponder"
                        value-key="id"
                      >
                        <el-option
                          v-for="item in addSubscribeForm.called.called_transponderOption"
                          :key="item.id"
                          :label="item.name"
                          :value="item"
                        />
                      </el-select>
                    </el-form-item>
                    <!--频率段-->
                    <el-form-item
                      :label="$t('message.reservation.dialog.reservation.create.right.form2.label3')"
                      prop="called.called_freq_segment"
                    >
                      <el-select
                        v-model="addSubscribeForm.called.called_freq_segment"
                        value-key="id"
                      >
                        <el-option
                          v-for="item in addSubscribeForm.called.called_freq_segmentOption"
                          :key="item.id"
                          :label="item.name"
                          :value="item"
                        />
                      </el-select>
                    </el-form-item>
                    <!--上行起始频点-->
                    <el-form-item
                      :label="$t('message.reservation.dialog.reservation.create.right.form2.label4')"
                      prop="called.called_up_freq_begin"
                    >
                      <el-input
                        class="mini-append"
                        v-model="addSubscribeForm.called.called_up_freq_begin"
                      >
                        <template slot="append">
                          Hz
                        </template>
                      </el-input>
                    </el-form-item>
                    <!--上行终止频点-->
                    <el-form-item
                      :label="$t('message.reservation.dialog.reservation.create.right.form2.label5')"
                      prop="called.called_up_freq_end"
                    >
                      <el-input
                        class="mini-append"
                        v-model="addSubscribeForm.called.called_up_freq_end"
                      >
                        <template slot="append">
                          Hz
                        </template>
                      </el-input>
                    </el-form-item>
                    <!--下行起始频点-->
                    <el-form-item
                      :label="$t('message.reservation.dialog.reservation.create.right.form2.label6')"
                      prop="called.called_down_freq_begin"
                    >
                      <el-input
                        class="mini-append"
                        v-model="addSubscribeForm.called.called_down_freq_begin"
                      >
                        <template slot="append">
                          Hz
                        </template>
                      </el-input>
                    </el-form-item>
                    <!--下行终止频点-->
                    <el-form-item
                      :label="$t('message.reservation.dialog.reservation.create.right.form2.label7')"
                      prop="called.called_down_freq_end"
                    >
                      <el-input
                        class="mini-append"
                        v-model="addSubscribeForm.called.called_down_freq_end"
                      >
                        <template slot="append">
                          Hz
                        </template>
                      </el-input>
                    </el-form-item>
                    <!--功率-->
                    <el-form-item
                      :label="$t('message.reservation.dialog.reservation.create.right.form2.label8')"
                      prop="called.called_power"
                    >
                      <el-input
                        class="mini-append"
                        v-model="addSubscribeForm.called.called_power"
                      >
                        <template slot="append">
                          dB
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </div>
        <div slot="footer">
          <el-button
            v-if="addSubscribeStep > 0"
            @click="handleAddSubscribeStepChange(0)"
          >
            <!--上一步-->
            {{ $t('message.reservation.dialog.reservation.create.footer.button.prev') }}
          </el-button>
          <el-button
            v-if="addSubscribeStep < 2"
            :loading="nextButtonLoading"
            @click="handleAddSubscribeStepChange(1)"
            type="primary"
          >
            <!--下一步-->
            {{ $t('message.reservation.dialog.reservation.create.footer.button.next') }}
          </el-button>
          <el-button
            :loading="submitButtonLoading"
            v-if="addSubscribeStep === 2"
            @click="submitForm('addSubscribeStep2Form')"
            type="primary"
          >
            <!--确定-->
            {{ $t('message.reservation.dialog.reservation.create.footer.button.submit') }}
          </el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import service from '@/service/service'
import common from '@/common'
export default {
  name: 'Subscribe',
  computed: {
    deptTreeForSelectCu () {
      return this.$store.getters.deptTreeForSelectCu
    }
  },
  data () {
    return {
      subscribeLoading: false,
      subscribeDialogLoading: false,
      nextButtonLoading: false,
      submitButtonLoading: false,

      subscribeTable: [],

      deptTreeProps: {
        label: 'name',
        children: 'children',
        disabled: (data, node) => {
          if (data.node_type === 'root' || data.node_type === 'dept') {
            return true
          } else if (data.node_type === 'station') {
            return data.cus.length !== 1
          } else {
            return !node.isLeaf
          }
        }
      },

      addSubscribeVisible: false,
      model: '',

      addSubscribeStep: 0,
      addSubscribeForm: {
        cus: [],
        start_time_show: '',
        end_time_show: '',
        start_time_picker: '',
        end_time_picker: '',
        satelliteOption: [],
        beamOption: [],
        speedOption: [],

        satellite: '',
        start_time: '',
        end_time: '',
        caller: {
          selection: null,
          caller_cu_device: '',
          caller_transponderOption: [],
          caller_freq_segmentOption: [],

          caller_cu: '',
          caller_speed: '',
          caller_beam: '',
          caller_transponder: '',
          caller_freq_segment: '',
          caller_up_freq_begin: '',
          caller_up_freq_end: '',
          caller_down_freq_begin: '',
          caller_down_freq_end: '',
          caller_power: ''
        },
        called: {
          selection: null,
          called_cu_device: '',
          called_transponderOption: [],
          called_freq_segmentOption: [],

          called_cu: '',
          called_speed: '',
          called_beam: '',
          called_transponder: '',
          called_freq_segment: '',
          called_up_freq_begin: '',
          called_up_freq_end: '',
          called_down_freq_begin: '',
          called_down_freq_end: '',
          called_power: ''
        }
      },
      addSubscribeStep1FormRules: {
        satellite: [
          // 请选择卫星
          { required: true, message: this.$t('message.reservation.dialog.reservation.validate.form1.msg1'), trigger: 'change' }
        ],
        'caller.caller_beam': [
          // 请选择波束
          { required: true, message: this.$t('message.reservation.dialog.reservation.validate.form1.msg2'), trigger: 'change' }
        ],
        'caller.caller_speed': [
          // 请选择速率
          { required: true, message: this.$t('message.reservation.dialog.reservation.validate.form1.msg3'), trigger: 'change' }
        ],
        'called.called_beam': [
          // 请选择波束
          { required: true, message: this.$t('message.reservation.dialog.reservation.validate.form1.msg2'), trigger: 'change' }
        ],
        'called.called_speed': [
          // 请选择速率
          { required: true, message: this.$t('message.reservation.dialog.reservation.validate.form1.msg3'), trigger: 'change' }
        ]
      },
      addSubscribeStep2FormRules: {
        'caller.caller_transponder': [
          // 请选择转发器
          { required: true, message: this.$t('message.reservation.dialog.reservation.validate.form2.msg1'), trigger: 'change' }
        ],
        'caller.caller_freq_segment': [
          // 请选择频率段
          { required: true, message: this.$t('message.reservation.dialog.reservation.validate.form2.msg2'), trigger: 'change' }
        ],
        'caller.caller_up_freq_begin': [
          // 请输入上行起始频点
          { required: true, message: this.$t('message.reservation.dialog.reservation.validate.form2.msg3'), trigger: 'blur' }
        ],
        'caller.caller_up_freq_end': [
          // 请输入上行终止频点
          { required: true, message: this.$t('message.reservation.dialog.reservation.validate.form2.msg4'), trigger: 'blur' }
        ],
        'caller.caller_down_freq_begin': [
          // 请输入下行起始频点
          { required: true, message: this.$t('message.reservation.dialog.reservation.validate.form2.msg5'), trigger: 'blur' }
        ],
        'caller.caller_down_freq_end': [
          // 请输入下行终止频点
          { required: true, message: this.$t('message.reservation.dialog.reservation.validate.form2.msg6'), trigger: 'blur' }
        ],
        'caller.caller_power': [
          // 请输入功率
          { required: true, message: this.$t('message.reservation.dialog.reservation.validate.form2.msg7'), trigger: 'blur' }
        ],
        'called.called_transponder': [
          // 请选择转发器
          { required: true, message: this.$t('message.reservation.dialog.reservation.validate.form2.msg1'), trigger: 'change' }
        ],
        'called.called_freq_segment': [
          // 请选择频率段
          { required: true, message: this.$t('message.reservation.dialog.reservation.validate.form2.msg2'), trigger: 'change' }
        ],
        'called.called_up_freq_begin': [
          // 请输入上行起始频点
          { required: true, message: this.$t('message.reservation.dialog.reservation.validate.form2.msg3'), trigger: 'blur' }
        ],
        'called.called_up_freq_end': [
          // 请输入上行终止频点
          { required: true, message: this.$t('message.reservation.dialog.reservation.validate.form2.msg4'), trigger: 'blur' }
        ],
        'called.called_down_freq_begin': [
          // 请输入下行起始频点
          { required: true, message: this.$t('message.reservation.dialog.reservation.validate.form2.msg5'), trigger: 'blur' }
        ],
        'called.called_down_freq_end': [
          // 请输入下行终止频点
          { required: true, message: this.$t('message.reservation.dialog.reservation.validate.form2.msg6'), trigger: 'blur' }
        ],
        'called.called_power': [
          // 请输入功率
          { required: true, message: this.$t('message.reservation.dialog.reservation.validate.form2.msg7'), trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    let self = this
    self.$nextTick(() => {
      self.getSubscribeTableData()
    })
  },
  methods: {
    async getSubscribeTableData () {
      let self = this
      try {
        self.subscribeLoading = true
        let resposne = await self.$store.dispatch(`axios`, {
          method: 'get',
          url: '/api/abs/devices/subscribe_freq_segment/'
        })
        self.subscribeTable = resposne.data.map(item => {
          return {
            ...item,
            start_time_show: common.convertDateTime(new Date(item.start_time), true),
            end_time_show: common.convertDateTime(new Date(item.end_time), true),
            caller_node_key: `cu_${item.caller_cu}`,
            called_node_key: `cu_${item.called_cu}`
          }
        })
      } finally {
        self.subscribeLoading = false
      }
    },
    handleDeptTreeCheckChange (checkData, ifcheck) {
      let self = this
      let selection = self.$refs.selectDeptTree.getCheckedNodes()
      // 根据选择的信息,更新form中的终端信息
      self.setAddSubscribeCu(checkData, ifcheck)
      // 改变tree的disabled规则,若已经选择了两个终端,则禁止继续选择,取消任意终端后恢复初始
      if (selection.length >= 2) {
        self.deptTreeProps.disabled = (data, node) => {
          if (data.node_type === 'root' || data.node_type === 'dept') {
            return true
          } else {
            if (data.node_type === 'station') {
              return !selection.find(item => item.id === data.id && item.node_type === 'station')
            } else {
              return !selection.find(item => item.device === data.device)
            }
          }
        }
      } else {
        // 重置checkbox的disabled规则
        self.deptTreeProps.disabled = (data, node) => {
          if (data.node_type === 'root' || data.node_type === 'dept') {
            return true
          } else if (data.node_type === 'station') {
            return data.cus.length !== 1
          } else {
            return !node.isLeaf
          }
        }
      }
    },
    setAddSubscribeCu (data, check) {
      let self = this
      if (check) {
        // 选择节点时
        let checkCu = ''
        if (data.node_type === 'station') {
          checkCu = data.cus[0]
        } else {
          checkCu = data
        }
        if (self.addSubscribeForm.caller.selection === null) {
          self.addSubscribeForm.caller.selection = data
          self.addSubscribeForm.caller.caller_cu_device = checkCu.device
          self.addSubscribeForm.caller.caller_cu = checkCu.id
        } else if (self.addSubscribeForm.called.selection === null) {
          self.addSubscribeForm.called.selection = data
          self.addSubscribeForm.called.called_cu_device = checkCu.device
          self.addSubscribeForm.called.called_cu = checkCu.id
        } else {
          console.log('already exist 2 cus')
        }
      } else {
        // 节点被取消选择时
        // 判断caller是否为空,若为空则删除called的信息
        if (self.addSubscribeForm.caller.selection) {
          if (data.node_type === 'station') {
            if (self.addSubscribeForm.caller.selection.node_type === 'station' && self.addSubscribeForm.caller.selection.id === data.id) {
              self.addSubscribeForm.caller.selection = null
              self.addSubscribeForm.caller.caller_cu = ''
              self.addSubscribeForm.caller.caller_cu_device = ''
            } else {
              self.addSubscribeForm.called.selection = null
              self.addSubscribeForm.called.called_cu = ''
              self.addSubscribeForm.called.called_cu_device = ''
            }
          } else {
            if (self.addSubscribeForm.caller.selection.device === data.device) {
              self.addSubscribeForm.caller.selection = null
              self.addSubscribeForm.caller.caller_cu = ''
              self.addSubscribeForm.caller.caller_cu_device = ''
            } else {
              self.addSubscribeForm.called.selection = null
              self.addSubscribeForm.called.called_cu = ''
              self.addSubscribeForm.called.called_cu_device = ''
            }
          }
        } else if (self.addSubscribeForm.called.selection) {
          self.addSubscribeForm.called.selection = null
          self.addSubscribeForm.called.called_cu = ''
          self.addSubscribeForm.called.called_cu_device = ''
        }
      }
    },
    handleAddSubscribeDialogClose () {
      let self = this
      self.addSubscribeStep = 0
      self.deptTreeProps.disabled = (data, node) => {
        if (data.node_type === 'root' || data.node_type === 'dept') {
          return true
        } else if (data.node_type === 'station') {
          return data.cus.length !== 1
        } else {
          return !node.isLeaf
        }
      }
      self.addSubscribeForm = {
        cus: [],
        start_time_show: '',
        end_time_show: '',
        start_time_picker: '',
        end_time_picker: '',
        satelliteOption: [],
        beamOption: [],
        speedOption: [],

        satellite: '',
        start_time: '',
        end_time: '',
        caller: {
          selection: null,
          caller_cu_device: '',
          caller_transponderOption: [],
          caller_freq_segmentOption: [],

          caller_cu: '',
          caller_speed: '',
          caller_beam: '',
          caller_transponder: '',
          caller_freq_segment: '',
          caller_up_freq_begin: '',
          caller_up_freq_end: '',
          caller_down_freq_begin: '',
          caller_down_freq_end: '',
          caller_power: ''
        },
        called: {
          selection: null,
          called_cu_device: '',
          called_transponderOption: [],
          called_freq_segmentOption: [],

          called_cu: '',
          called_speed: '',
          called_beam: '',
          called_transponder: '',
          called_freq_segment: '',
          called_up_freq_begin: '',
          called_up_freq_end: '',
          called_down_freq_begin: '',
          called_down_freq_end: '',
          called_power: ''
        }
      }
    },
    async handleAddSubscribeSatelliteChange () {
      let self = this
      await self.$store.dispatch(`getBeamOption`, self.addSubscribeForm.satellite.id)
      self.addSubscribeForm.caller.caller_beam = null
      self.addSubscribeForm.called.called_beam = null
      self.addSubscribeForm.beamOption = [...self.$store.state.beam.beamOption]
    },
    // step3中选择转发器
    handleCallerTransponderSelectChange (val) {
      let self = this
      self.addSubscribeForm.caller.caller_freq_segmentOption = val.freq_segments
      self.addSubscribeForm.caller.caller_freq_segment = ''
      self.addSubscribeForm.caller.caller_up_freq_begin = ''
      self.addSubscribeForm.caller.caller_up_freq_end = ''
      self.addSubscribeForm.caller.caller_down_freq_begin = ''
      self.addSubscribeForm.caller.caller_down_freq_end = ''
    },
    handleCalledTransponderSelectChange (val) {
      let self = this
      self.addSubscribeForm.called.called_freq_segmentOption = val.freq_segments
      self.addSubscribeForm.called.called_freq_segment = ''
      self.addSubscribeForm.called.called_up_freq_begin = ''
      self.addSubscribeForm.called.called_up_freq_end = ''
      self.addSubscribeForm.called.called_down_freq_begin = ''
      self.addSubscribeForm.called.called_down_freq_end = ''
    },
    async handleSubscribeCreate () {
      let self = this
      self.subscribeDialogLoading = true
      self.addSubscribeVisible = true
      try {
        await self.$store.dispatch('getDeptTreeAll')
      } catch (e) {
        self.addSubscribeVisible = false
        return
      } finally {
        self.subscribeDialogLoading = false
      }
      self.model = 'create'
      self.addSubscribeForm.speedOption = service.getOptionList(self.$t('message.define.speed'))
    },
    async handleAddSubscribeStepChange (operate) {
      let self = this
      // 上一步
      if (operate === 0) {
        self.addSubscribeStep -= 1
        if (self.addSubscribeStep === 0) {
          let checkNodeKeys = [
            self.addSubscribeForm.caller.selection.node_key,
            self.addSubscribeForm.called.selection.node_key
          ]
          self.$nextTick(() => {
            self.$refs.selectDeptTree.setCheckedKeys(checkNodeKeys)
          })
        }
      }
      // 下一步
      if (operate === 1) {
        if (self.addSubscribeStep === 0) {
          // 校验
          if (self.addSubscribeForm.caller.selection === null || self.addSubscribeForm.called.selection === null) {
            // 请选择两个终端
            self.$message.error(self.$t('message.reservation.dialog.reservation.validate.message.msg1'))
            return
          }
          if (!self.addSubscribeForm.start_time_picker) {
            // 请选择开始时间
            self.$message.error(self.$t('message.reservation.dialog.reservation.validate.message.msg2'))
            return
          }
          if (!self.addSubscribeForm.end_time_picker) {
            // 请选择结束时间
            self.$message.error(self.$t('message.reservation.dialog.reservation.validate.message.msg3'))
            return
          }
          if (self.addSubscribeForm.start_time_picker.getTime() >= self.addSubscribeForm.end_time_picker.getTime()) {
            // 结束时间必须晚于开始时间
            self.$message.error(self.$t('message.reservation.dialog.reservation.validate.message.msg4'))
            return
          }
          self.nextButtonLoading = true
          try {
            self.addSubscribeForm.start_time = common.convertDateTime(self.addSubscribeForm.start_time_picker)
            self.addSubscribeForm.end_time = common.convertDateTime(self.addSubscribeForm.end_time_picker)
            self.addSubscribeForm.start_time_show = common.convertDateTime(self.addSubscribeForm.start_time_picker, true)
            self.addSubscribeForm.end_time_show = common.convertDateTime(self.addSubscribeForm.end_time_picker, true)
            await self.$store.dispatch('axios', {
              method: 'post',
              url: `/api/abs/devices/subscribe_validate_cu/`,
              data: {
                start_time: self.addSubscribeForm.start_time,
                end_time: self.addSubscribeForm.end_time,
                caller_cu: self.addSubscribeForm.caller.caller_cu,
                called_cu: self.addSubscribeForm.called.called_cu
              }
            })
            await self.$store.dispatch(`getSatelliteList`)
            self.addSubscribeForm.satelliteOption = [...self.$store.state.satellite.satelliteList]
          } finally {
            self.nextButtonLoading = false
          }
        }
        if (self.addSubscribeStep === 1) {
          try {
            await self.$refs.addSubscribeStep1Form.validate()
          } catch (e) {
            return
          }
          self.nextButtonLoading = true
          try {
            let recommended = await self.$store.dispatch('axios', {
              method: 'post',
              url: `/api/abs/devices/recommended_freq_segment/`,
              data: {
                start_time: self.addSubscribeForm.start_time,
                end_time: self.addSubscribeForm.end_time,
                caller_beam: self.addSubscribeForm.caller.caller_beam.id,
                caller_speed: self.addSubscribeForm.caller.caller_speed.value,
                called_beam: self.addSubscribeForm.called.called_beam.id,
                called_speed: self.addSubscribeForm.called.called_speed.value,
                caller_cu: self.addSubscribeForm.caller.caller_cu,
                called_cu: self.addSubscribeForm.called.called_cu
              }
            })
            // 设置转发器
            self.addSubscribeForm.caller.caller_transponderOption = recommended.data.send_transponders
            self.addSubscribeForm.caller.caller_transponder = self.addSubscribeForm.caller.caller_transponderOption.find(item => item.id === recommended.data.freq.send.transponder)
            // 设置频率段
            self.addSubscribeForm.caller.caller_freq_segmentOption = self.addSubscribeForm.caller.caller_transponder.freq_segments
            self.addSubscribeForm.caller.caller_freq_segment = self.addSubscribeForm.caller.caller_freq_segmentOption.find(item => item.id === recommended.data.freq.send.freq_segment)
            self.addSubscribeForm.caller.caller_up_freq_begin = recommended.data.freq.send.up_freq_begin
            self.addSubscribeForm.caller.caller_up_freq_end = recommended.data.freq.send.up_freq_end
            self.addSubscribeForm.caller.caller_down_freq_begin = recommended.data.freq.send.down_freq_begin
            self.addSubscribeForm.caller.caller_down_freq_end = recommended.data.freq.send.down_freq_end

            // 设置转发器
            self.addSubscribeForm.called.called_transponderOption = recommended.data.receive_transponders
            self.addSubscribeForm.called.called_transponder = self.addSubscribeForm.called.called_transponderOption.find(item => item.id === recommended.data.freq.receive.transponder)
            // 设置频率段
            self.addSubscribeForm.called.called_freq_segmentOption = self.addSubscribeForm.called.called_transponder.freq_segments
            self.addSubscribeForm.called.called_freq_segment = self.addSubscribeForm.called.called_freq_segmentOption.find(item => item.id === recommended.data.freq.receive.freq_segment)
            self.addSubscribeForm.called.called_up_freq_begin = recommended.data.freq.receive.up_freq_begin
            self.addSubscribeForm.called.called_up_freq_end = recommended.data.freq.receive.up_freq_end
            self.addSubscribeForm.called.called_down_freq_begin = recommended.data.freq.receive.down_freq_begin
            self.addSubscribeForm.called.called_down_freq_end = recommended.data.freq.receive.down_freq_end
          } finally {
            self.nextButtonLoading = false
          }
        }
        self.addSubscribeStep += 1
      }
    },
    handleSubscribeModify () {
      let self = this
      self.model = 'modify'
    },
    async handleSubscribeDelete (row) {
      let self = this
      try {
        // 此操作将永久删除该预约点对点资源，是否继续？
        await self.$confirm(self.$t('message.reservation.dialog.reservation.validate.message.msg5'), self.$t('message.common.label.prompt'), {
          confirmButtonText: self.$t('message.common.button.confirm'),
          cancelButtonText: self.$t('message.common.button.cancel'),
          type: 'warning'
        })
      } catch (e) {
        return
      }
      await self.$store.dispatch(`axios`, {
        method: 'delete',
        url: `/api/abs/devices/subscribe_freq_segment/${row.id}/`
      })
      self.$message({
        // 预约点对点资源删除成功
        message: self.$t('message.reservation.dialog.reservation.validate.message.msg6'),
        type: 'success'
      })
      self.getSubscribeTableData()
    },
    async submitForm (formName) {
      let self = this
      try {
        await self.$refs[formName].validate()
      } catch (e) {
        return
      }
      if (formName === 'addSubscribeStep2Form') {
        let payload = {
          start_time: self.addSubscribeForm.start_time,
          end_time: self.addSubscribeForm.end_time,
          caller_cu: self.addSubscribeForm.caller.caller_cu,
          caller_speed: self.addSubscribeForm.caller.caller_speed.value,
          caller_power: self.addSubscribeForm.caller.caller_power,
          caller_up_freq_begin: self.addSubscribeForm.caller.caller_up_freq_begin,
          caller_up_freq_end: self.addSubscribeForm.caller.caller_up_freq_end,
          caller_down_freq_begin: self.addSubscribeForm.caller.caller_down_freq_begin,
          caller_down_freq_end: self.addSubscribeForm.caller.caller_down_freq_end,
          caller_beam: self.addSubscribeForm.caller.caller_beam.id,
          caller_freq_segment: self.addSubscribeForm.caller.caller_freq_segment.id,

          called_cu: self.addSubscribeForm.called.called_cu,
          called_speed: self.addSubscribeForm.called.called_speed.value,
          called_power: self.addSubscribeForm.called.called_power,
          called_up_freq_begin: self.addSubscribeForm.called.called_up_freq_begin,
          called_up_freq_end: self.addSubscribeForm.called.called_up_freq_end,
          called_down_freq_begin: self.addSubscribeForm.called.called_down_freq_begin,
          called_down_freq_end: self.addSubscribeForm.called.called_down_freq_end,
          called_beam: self.addSubscribeForm.called.called_beam.id,
          called_freq_segment: self.addSubscribeForm.called.called_freq_segment.id
        }
        self.submitButtonLoading = true
        try {
          await self.$store.dispatch('axios', {
            method: 'post',
            url: `/api/abs/devices/subscribe_freq_segment/`,
            data: payload
          })
        } finally {
          self.submitButtonLoading = false
        }
        self.addSubscribeVisible = false
        // 添加点对点预约资源成功
        self.$message.success(self.$t('message.reservation.dialog.reservation.validate.message.msg7'))
        self.getSubscribeTableData()
      }
    }
  }
}
</script>

<style scoped>
  .subscribe-expand-form-label{
    color: #4e6d9d;
    font-weight: bold;
  }
  .subscribe-expand-form-item{
    width: calc(50% - 10px);
  }
  .subscribe-dialog-div-content{
    margin-top: 30px;
    display: flex;
    flex-flow: row nowrap;
    align-content: center;
  }
  .subscribe-dialog-div-content-item1{
    flex: 0 0 300px;
    border-radius: 6px;
  }
  .subscribe-dialog-div-content-item2{
    flex: 1 0 490px;
    border-radius: 6px;
  }
  .subscribe-dialog-form-header-container{
    border-bottom: solid 1px #e5e5e5;
  }
  .subscribe-dialog-form-header{
    width: 100%;
    padding: 10px 12px 10px 20px;
    text-align: left;
    font-size: 15px;
    box-sizing: border-box;
    font-weight: bold;
  }
</style>
